import React, { Component } from 'react'
import { Form, Button, Select } from 'antd'
import { FormInstance } from 'antd/lib/form'
import { getComponent } from '@comm/getComponent'
import "../style.scss"

interface IProps {
    column: any[],
    fromKey?: string
    go: (values: any) => void
}
interface IStates {
    column: any[],
    btnabled?: boolean,
    title?: any,
}

export default class BaseForm extends Component<IProps, IStates> {
    // 获取表单实例
    public formRef: any = React.createRef<FormInstance>()
    public constructor(props: IProps) {
        super(props)
        this.state = {
            column: [],
        }
    }
    public componentDidMount() {
        this.setState({ column: this.props.column })
    }
    public onFocus = (item: any) => {
        const d = document.getElementById(item.id)
        if(d){
            item.onFocus()
            d.blur()
        }
    }
    // 重置表单
    public resetFields = () => {
        this.formRef.current.resetFields()
    }
    // 表单验证
    public validateFields = (add: any) => {
        this.formRef.current.validateFields().then(() => {
            this.getFieldsValue()
        }).catch(() => {
            console.log("请输入信息")
        })
    }
    // 获取表单数据
    public getFieldsValue = () => {
        const values = this.formRef.current.getFieldsValue()
        return values
    }

    public renderFormItem(item: any) {
        const FormItemComponent = getComponent(item.type)
        if (item.type === "select") {
            return (
                <Form.Item label={item.label} name={item.name} rules={item.rules} key={item.label}>
                    <FormItemComponent {...item.component} style={item.style}>
                        {item.option.map((item: any) => {
                            return (
                                <Select.Option key={item.value} value={item.key}>{item.value}</Select.Option>
                            )
                        })
                        }
                    </FormItemComponent>
                </Form.Item>
            )
        } else if (item.type === 'none') {
            return null
        } else if (item.type === "cascader") {
            return (
                <Form.Item label={item.label} name={item.name} rules={item.rules} key={item.label}>
                    <FormItemComponent {...item.component} style={item.style} options={item.option}
                        expandTrigger="hover" changeOnSelect={true}>
                    </FormItemComponent>
                </Form.Item>
            )
        } else if (item.type === "treeSelect") {
            return (
                <Form.Item label={item.label} name={item.name} rules={item.rules} key={item.label}>
                    <FormItemComponent {...item.component} style={item.style}
                        {...item.options}>
                    </FormItemComponent>
                </Form.Item>
            )
        } else {
            return (
                <Form.Item label={item.label} name={item.name} rules={item.rules} key={item.label}>
                    {
                        item.onFocus === undefined ?
                            <FormItemComponent {...item.component} style={item.style}></FormItemComponent>
                            :
                            <FormItemComponent {...item.component} style={item.style}
                                onFocus={() => this.onFocus(item)}
                            id={item.id}></FormItemComponent>
                    }
                </Form.Item>
            )
        }
    }
    public renderForm() {
        const { column } = this.props.fromKey && this.props.fromKey === "roleForm" ? this.state : this.props
        const formCol = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 }
        }
        return (
            <Form ref={this.formRef} {...formCol} >
                {
                    column.map((item) => {
                        return (
                            this.renderFormItem(item)
                        )
                    })
                }
            </Form>
        )
    }
    public renderButton() {
        return (
            <div>
                <Button type="primary">登录</Button>
                <Button type="default" onClick={() => { this.resetFields() }}>重置</Button>
            </div>
        )
    }
    public render() {
        return (
            <React.Fragment>
                {this.renderForm()}
                {this.renderButton()}
            </React.Fragment>
        )
    }
}